<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 上 -->
      <el-card shadow="always">
        <el-row :gutter="12">
          <!-- 用户数量 -->
          <el-col :span="6">
            <el-card shadow="hover" class="el-cardbody">
              <div class="div-car">
                <div>
                  <svg-icon icon-class="1" class="iconClass" />
                </div>
                <div class="left-rigth">
                  <span>用户数量</span>
                  <span class="span-car">{{ resList }}</span>
                </div>
              </div>
            </el-card>
          </el-col>

          <!-- 房产数量 -->
          <el-col :span="6">
            <el-card shadow="hover" class="el-cardbody">
              <div class="div-car">
                <div>
                  <svg-icon icon-class="2" class="iconClass" />
                </div>
                <div class="left-rigth">
                  <span>房产数量</span>
                  <span class="span-car">{{ newHouseNum }}</span>
                </div>
              </div>
            </el-card>
          </el-col>

          <!-- 房产类别 -->
          <el-col :span="6">
            <el-card shadow="hover" class="el-cardbody">
              <div class="div-car">
                <div>
                  <svg-icon icon-class="3" class="iconClass" />
                </div>
                <div class="left-rigth">
                  <span>房产类别</span>
                  <span class="span-car">{{ newClassify }}</span>
                </div>
              </div>
            </el-card>
          </el-col>

          <!-- 房产中介  -->
          <el-col :span="6">
            <el-card shadow="hover" class="el-cardbody">
              <div class="div-car">
                <div>
                  <svg-icon icon-class="4" class="iconClass" />
                </div>
                <div class="left-rigth">
                  <span>房产中介</span>
                  <span class="span-car">{{ newAgentNum }}</span>
                </div>
              </div>
            </el-card>
          </el-col>

        </el-row>

      </el-card>
      <!-- 中 -->
      <!-- 折线图 -->
      <center class="centeR" />
      <!-- 下 -->
      <below />
    </div>

    <!-- 最外层div -->
  </div>

</template>
<script>
import { mapGetters } from 'vuex'
import center from './components/center.vue' // 引入中间部门折现图  --中间组件的封装
import below from './components/below.vue'
import { getClientNum } from '@/api/client'
import { getPropertyNum } from '@/api/property'
import { Classification } from '@/api/category'
import { getagentsCount } from '@/api/agents'

export default {
  name: 'Dashboard',
  components: {
    center, below
  },
  data() {
    return {
      resList: '',
      newHouseNum: '',
      newClassify: '',
      newAgentNum: ''

    }
  },
  async created() {
    // console.log(105, document.cookie)
    // token=document.cookie.split('')
    // 获取用户数量
    const res = await getClientNum()
    // console.log(93, res)
    this.resList = res
    // 获取房产数量
    const houseNum = await getPropertyNum()
    // console.log(houseNum, 104)
    this.newHouseNum = houseNum
    // 获取分类数量
    const classify = await Classification()
    // console.log(classify, 110)
    this.newClassify = classify
    // 获取经纪人数量
    const agentNum = await getagentsCount()
    // console.log(agentNum, 116)
    this.newAgentNum = agentNum
  },
  computed: {
    ...mapGetters([

    ])
  }
}
</script>

<style lang="scss" scoped>
.iconClass{

  font-size: 80px;
}

 .centeR{
  margin: 38px auto;
 }

  ::v-deep.el-cardbody{
    padding: 30px;
    margin: 0 15px;

  }
  .div-car{
    display: flex;
    justify-content: space-evenly;

  }
  .left-rigth{
    display: flex;
    flex-direction: column;
    height: 15px;
    font-weight: bold;
  }
  .span-car{
    margin-top: 35px;
  }
.dashboard {

  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;

  }
}
</style>
